<template>
  <div style="background-color: #fff">
    <a-row>
      <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" v-if="remark" class="result"
        >审核拒绝：{{ remark }}</a-col
      >
    </a-row>
    <div>
      <a-form
        @submit="handleSubmit"
        style="margin-top: 8px; width: 90%; margin: 0 auto"
        :form="form"
      >
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 10 }" class="formGroupTitle"
            >账户信息</a-col
          >
          <a-col :xs="{ span: 24 }" :sm="{ span: 10, offset: 1 }"
            ><a-button @click="checkRepeatAcc" type="primary" size="small"
              ><span style="font-size: 12px">重复检测</span></a-button
            ></a-col
          >
        </a-row>
        <a-form-item
          v-bind="formItemLayout"
          label="手机号码"
          help="
                    手机号不可重复，手机号作为会员账号"
        >
          <div>
            <a-input
              :disabled="modifyInput"
              name="phone"
              placeholder="请输入手机号码"
              v-decorator="[
                'phone',
                {
                  rules: [
                    { required: true, message: '请输入手机号码!' },
                    { validator: validateCode },
                  ],
                  validateTrigger: 'blur',
                },
              ]"
              @change="phoneChange"
            />
          </div>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="Email">
          <a-input
            :disabled="modifyInput"
            name="email"
            placeholder="请输入邮箱地址"
            v-decorator="[
              'email',
              {
                rules: [
                  { type: 'email', message: '请输入有效邮箱地址!' },
                  { required: true, message: '请输入邮箱地址!' },
                  { validator: validatemail },
                ],
                validateTrigger: 'blur',
              },
            ]"
            @change="emailChange"
          />
        </a-form-item>
        <!-- , pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/ -->
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 10 }" class="formGroupTitle"
            >基本信息</a-col
          >
        </a-row>
        <a-form-item v-bind="formItemLayout" label="客户类型">
          <div>
            <a-select
              :disabled="typeDisabled"
              class="width-sty"
              v-decorator="[
                'merchantType',
                { rules: [{ required: true, message: '请选择客户类型' }] },
              ]"
              placeholder="请选择客户类型"
              @change="handleChange1"
            >
              <a-select-option value="org">企业</a-select-option>
              <a-select-option value="mer">个体工商户</a-select-option>
            </a-select>
          </div>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="企业性质">
          <a-select
            style="width: 50%"
            v-decorator="[
              'orgType',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择企业性质',
                  },
                ],
                initialValue: 'org_type_001',
              },
            ]"
          >
            <a-select-option v-for="d in EPseloptions" :key="d.value">{{
              d.text
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="客户名称">
          <a-input
            v-decorator="[
              'merchantName',
              { rules: [{ required: true, message: '请输入客户名称' }] },
            ]"
            placeholder="请填与营业执照一致的名称"
            @change="merchantNameChange"
          />
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="客户简称">
          <a-input
            v-decorator="[
              'shortname',
              { rules: [{ required: true, message: '请输入客户简称' }] },
            ]"
            placeholder="请输入简称"
          />
        </a-form-item>

        <!-- <a-form-item v-bind="formItemLayout" label="所属行业">
                    <a-cascader style="width: 80%;" v-decorator="[
                        'industryCategoryCode',
                        {rules: [{ required: true, message: '请选择所属行业' }]}
                      ]" :options="Categoryoptions" @change="handleChange" placeholder="请选择所属行业" changeOnSelect  />
                </a-form-item> -->
        <a-form-item v-bind="formItemLayout" label="商户类别">
          <a-cascader
            style="width: 60%"
            v-decorator="[
              'mccName',
              { rules: [{ required: true, message: '请选择商户类别' }] },
            ]"
            :options="mccoptions"
            @change="mccHandleChange"
            placeholder="请选择商户类别"
          />

          <!-- :fieldNames="{ label: 'name', value: 'code', children: 'children' }" -->
        </a-form-item>
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 10 }" class="formGroupTitle"
            >经营信息</a-col
          >
        </a-row>
        <a-form-item v-bind="formItemLayout" label="社会统一信用代码/注册号">
          <a-input
            v-decorator="[
              'orgRegisterNo',
              {
                rules: [
                  { required: true, message: '社会统一信用代码/注册号' },
                  {
                    validator: validateOrgRegisterNo,
                  },
                ],
                validateTrigger: 'blur',
              },
            ]"
            placeholder="请输入社会统一信用代码/注册号"
          />
        </a-form-item>

        <a-form-item
          v-bind="formItemLayout"
          help="无注册资本请填写0"
          label="注册资本"
        >
          <a-input-number
            style="width: 185px"
            :mix="0"
            :max="999999999"
            :step="1"
            :precision="0"
            v-decorator="[
              'orgRegisterPrincipal',
              {
                rules: [
                  { required: true, message: '请输入注册资本' },
                  // {
                  //   validator: validateorgRegisterPrincipal,
                  // },
                ],
                validateTrigger: 'blur',
              },
            ]"
            placeholder="请输入注册资本"
          />
          <span>&nbsp;万元人民币</span>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="成立日期">
          <a-date-picker
            placeholder="请选择成立日期"
            :locale="zh_CN"
            @change="createDateChange"
            v-decorator="[
              'createDate',
              { rules: [{ required: true, message: '请选择成立日期' }] },
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" required label="营业期限">
          <div>
            <a-date-picker
              :locale="zh_CN"
              :disabledDate="disabledStartDate"
              format="YYYY-MM-DD"
              :required="true"
              v-model="startValue"
              placeholder="请选择起始日期"
              @change="startChange"
              @openChange="handleStartOpenChange"
            />
            &nbsp; 至 &nbsp;
            <a-date-picker
              :locale="zh_CN"
              :disabledDate="disabledEndDate"
              format="YYYY-MM-DD"
              placeholder="请选择截止日期"
              v-model="endValue"
              :open="endOpen"
              @change="endChange"
              @openChange="handleEndOpenChange"
            />
            <span @click="tolong" style="color: #1478d5; cursor: pointer"
              >&nbsp; 长期</span
            >
          </div>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="主营业务">
          <a-textarea
            v-decorator="[
              'mainBusiness',
              { rules: [{ required: true, message: '请输入主营业务' }] },
            ]"
            placeholder="请输入主营业务"
            :maxLength="100"
            :rows="3"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="营业执照地址">
          <a-cascader
            class="w-sty"
            v-decorator="[
              'dobusAddress',
              { rules: [{ required: true, message: '营业执照地址' }] },
            ]"
            :options="options"
            @change="onbusiChange"
            notFoundContent="Not found"
            placeholder="请选择营业执照地址"
          />
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="详细地址">
          <a-textarea
            v-decorator="[
              'busiAddress',
              {
                rules: [{ required: true, message: '请输入营业执照详细地址' }],
              },
            ]"
            placeholder="请输入营业执照详细地址"
            :rows="2"
          />
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="实际经营地址">
          <a-cascader
            class="w-sty"
            v-if="!issh"
            v-decorator="[
              'Address',
              { rules: [{ required: true, message: '实际经营地址' }] },
            ]"
            :options="options2"
            @change="onChange"
            placeholder="请选择经营地址"
          />
          <span
            @click="toAddSame"
            style="color: #1478d5; cursor: pointer; fontsize: 13px"
            >同营业执照地址</span
          >
        </a-form-item>

        <a-form-item
          v-bind="formItemLayout"
          help="此地址将作为之后协议/资料寄送的默认地址，请准确填写"
          label="详细地址"
        >
          <a-textarea
            v-decorator="[
              'realAddress',
              {
                rules: [{ required: true, message: '请输入实际经营详细地址' }],
              },
            ]"
            placeholder="请输入实际经营详细地址"
            :rows="2"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="经营场所">
          <a-radio-group
            v-decorator="[
              'placeRight',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择经营场所是否自有或租赁',
                  },
                ],
              },
            ]"
            @change="placeRightChange"
          >
            <a-radio value="place_right_001">自有</a-radio>
            <a-radio value="place_right_002">租赁</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="经营场所面积">
          <a-select
            style="width: 50%"
            v-decorator="[
              'placeArea',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择',
                  },
                ],
              },
            ]"
            placeholder="请选择"
          >
            <a-select-option v-for="d in areaoptions" :key="d.value">{{
              d.text
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="员工人数">
          <a-select
            style="width: 50%"
            v-decorator="[
              'orgEmployees',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择',
                  },
                ],
              },
            ]"
            placeholder="请选择"
          >
            <a-select-option v-for="d in numoptions" :key="d.value">{{
              d.text
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-row class="row-sty">
          <a-col :xs="{ span: 24 }" :sm="{ span: 10 }" class="formGroupTitle"
            >联系人信息</a-col
          >
        </a-row>
        <a-form-item v-bind="formItemLayout" label="姓名">
          <a-input
            v-decorator="[
              'contactName',
              { rules: [{ required: true, message: '请输入姓名' }] },
            ]"
            placeholder="请输入姓名"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="联系电话">
          <a-input
            v-decorator="[
              'contactPhone',
              {
                rules: [
                  { required: true, message: '请输入联系电话!' },
                  { validator: validateCode },
                ],
                validateTrigger: 'blur',
              },
            ]"
            placeholder="请输入联系电话"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="Email">
          <a-input
            v-decorator="[
              'contactEmail',
              {
                rules: [
                  { type: 'email', message: '请输入有效邮箱地址!' },
                  { required: true, message: '请输入邮箱地址!' },
                  { validator: validatemail },
                ],
                validateTrigger: 'blur',
              },
            ]"
            placeholder="请输入Email"
          />
        </a-form-item>
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 10 }" class="formGroupTitle"
            >法定代表人信息</a-col
          >
        </a-row>
        <a-form-item v-bind="formItemLayout" label="姓名">
          <a-input
            v-decorator="[
              'identityName',
              { rules: [{ required: true, message: '请输入法定代表人姓名' }] },
            ]"
            placeholder="请输入法定代表人姓名"
            @change="identityNameChange"
          />
        </a-form-item>
        <!-- add 国籍 -->
        <a-form-item v-bind="formItemLayout" label="国籍">
                 <div>
            <a-select
              disabled
              class="width-sty"
              v-model="nation"
            >
              <a-select-option value="中国">中国</a-select-option>
              
            </a-select>
          </div>
     
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="证件类型">
          <div>
            <a-select
              disabled
              class="width-sty"
              v-decorator="[
                'codetype',
                {
                  rules: [{ required: true, message: '请选择证件类型' }],
                  initialValue: 'legal',
                },
              ]"
            >
              <a-select-option value="legal">身份证</a-select-option>
              <a-select-option value="lucy">护照</a-select-option>
              <a-select-option value="disabled">港澳台通行证</a-select-option>
              <a-select-option value="Yiminghe">军官证</a-select-option>
              <a-select-option value="Yiminghe">户口簿</a-select-option>
            </a-select>
          </div>
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="证件号码">
          <a-input
            v-decorator="[
              'identityNo',
              {
                rules: [
                  { required: true, message: '请输入证件号码' },
                  {
                    validator: validateIdentityNo,
                  },
                ],
                validateTrigger: 'blur',
              },
            ]"
            placeholder="请输入证件号码"
          />
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="证件有效期">
          <a-date-picker
            :disabledDate="disabledDate"
            placeholder="请选择证件有效期"
            @change="dateChange"
            v-decorator="[
              'expiryDate',
              { rules: [{ required: true, message: '请选择证件有效期' }] },
            ]"
          />
          <span
            @click="longexpiryDate"
            style="color: #1478d5; cursor: pointer; fontsize: 13px"
            >&nbsp; 长期</span
          >
        </a-form-item>
        <a-row style="display: flex; align-items: center">
          <a-col :xs="{ span: 24 }" :sm="{ span: 10 }" class="formGroupTitle"
            >实际控制人信息</a-col
          >
          <a-col
            :xs="{ span: 24 }"
            :sm="{ span: 12, offset: 1 }"
            style="
              margin-bottom: 20px;
              font-size: 12px;
              color: #1478d5;
              cursor: pointer;
            "
            @click="tosame"
            >同上
          </a-col>
        </a-row>
        <a-form-item v-bind="formItemLayout" label="姓名">
          <a-input
            v-decorator="[
              'identityName2',
              { rules: [{ required: true, message: '请输入实际控制人姓名' }] },
            ]"
            placeholder="请输入实际控制人姓名"
          />
        </a-form-item>

           <!-- add 国籍 -->
        <a-form-item v-bind="formItemLayout" label="国籍">
                 <div>
            <a-select
              disabled
              class="width-sty"
              v-model="nation"
            >
              <a-select-option value="中国">中国</a-select-option>
              
            </a-select>
          </div>
     
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="证件类型">
          <div>
            <a-select
              disabled
              class="width-sty"
              v-decorator="[
                'codetype2',
                {
                  rules: [{ required: true, message: '请选择证件类型' }],
                  initialValue: 'legal',
                },
              ]"
            >
              <a-select-option value="legal">身份证</a-select-option>
              <a-select-option value="lucy">护照</a-select-option>
              <a-select-option value="disabled">港澳台通行证</a-select-option>
              <a-select-option value="Yiminghe">军官证</a-select-option>
              <a-select-option value="Yiminghe">户口簿</a-select-option>
            </a-select>
          </div>
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="证件号码">
          <a-input
            v-decorator="[
              'identityNo2',
              {
                rules: [
                  { required: true, message: '请输入证件号码' },
                  {
                    validator: validateIdentityNo2,
                  },
                ],
                validateTrigger: 'blur',
              },
            ]"
            placeholder="请输入证件号码"
          />
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="证件有效期">
          <a-date-picker
            :disabledDate="disabledDate"
            placeholder="请选择证件有效期"
            @change="dateChange2"
            v-decorator="[
              'expiryDate2',
              { rules: [{ required: true, message: '请选择证件有效期' }] },
            ]"
          />
          <span
            @click="longexpiryDate2"
            style="color: #1478d5; cursor: pointer; fontsize: 13px"
            >&nbsp; 长期</span
          >
        </a-form-item>
        <a-row style="display: flex; align-items: center">
          <a-col :sm="{ span: 10 }" class="formGroupTitle">银行账户信息</a-col>
        </a-row>
        <a-tabs v-model="tabShow" @change="tabcallback">
          <a-tab-pane tab="对公" key="1">
            <div v-if="tabShow == '1'" key="tabShow1">
              <a-form-item v-bind="formItemLayout" label="账户名称">
                <span>{{ bankCard.accountName }}</span>
              </a-form-item>
              <a-form-item v-bind="formItemLayout" label="联系人手机号">
                <a-input v-decorator="['contactBusMobile']" disabled />
              </a-form-item>
              <a-form-item v-bind="formItemLayout" label="开户行名称">
                <div>
                  <a-select
                    :disabled="bankInfo"
                    showSearch
                    :notFoundContent="null"
                    :defaultActiveFirstOption="false"
                    :showArrow="false"
                    :filterOption="false"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @search="bankNameSearch"
                    @change="bankNameChange"
                    class="width-sty"
                    v-decorator="[
                      'bankName',
                      {
                        rules: [
                          { required: true, message: '请选择开户行名称' },
                        ],
                      },
                    ]"
                    placeholder="请输入银行名称进行选择"
                  >
                    <a-select-option v-for="d in seloptions" :key="d.value"
                      >{{ d.label }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-item>

              <a-form-item
                v-bind="formItemLayout"
                label="开户行所在地"
                required
              >
                <a-cascader
                  :disabled="bankInfo"
                  class="w-sty"
                  v-model="bankaddress"
                  :options="options3"
                  @blur="addressBlur"
                  @change="addressChange"
                  placeholder="请选择开户行所在地"
                />
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="支行名称">
                <div>
                  <a-select
                    showSearch
                    @search="handleSearch"
                    :disabled="bankInfo"
                    labelInValue
                    @change="bankBranchNameChange"
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    style="width: 100%"
                    v-decorator="[
                      'bankBranchName',
                      {
                        rules: [{ required: true, message: '请输入支行名称' }],
                      },
                    ]"
                    placeholder="请选择支行名称"
                  >
                    <a-select-option
                      v-for="d in bankBranchoptions"
                      :key="d.value"
                      >{{ d.label }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="账号">
                <a-input
                  :disabled="bankInfo"
                  @blur="findCardBin"
                  v-decorator="[
                    'cardNo',
                    { rules: [{ required: true, message: '请输入账号' }] },
                  ]"
                  placeholder="请输入账号"
                />
              </a-form-item>
            </div>
          </a-tab-pane>

          <!-- 对私(法人) -->

          <a-tab-pane tab="对私(法人)" key="2">
            <div v-if="tabShow == '2'" key="tabShow2">
              <a-form-item v-bind="formItemLayout" label="账户名称">
                <span>{{ bankCard.accountName }}</span>
              </a-form-item>
              <a-form-item v-bind="formItemLayout" label="预留银行手机号">
                <div>
                  <a-input
                    name="phone"
                    placeholder="请输入预留银行手机号"
                    v-decorator="[
                      'PrimobileNo',
                      {
                        rules: [
                          { required: true, message: '请输入预留银行手机号!' },
                          { validator: validateCode },
                        ],
                        validateTrigger: 'blur',
                      },
                    ]"
                  />
                </div>
              </a-form-item>
              <a-form-item v-bind="formItemLayout" label="持卡人身份证号">
                <span>{{ idCard }}</span>
              </a-form-item>
              <a-form-item v-bind="formItemLayout" label="开户行名称">
                <div>
                  <a-select
                    :disabled="bankInfo"
                    showSearch
                    :notFoundContent="null"
                    :defaultActiveFirstOption="false"
                    :showArrow="false"
                    :filterOption="false"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @search="bankNameSearch"
                    @change="bankNameChange"
                    class="width-sty"
                    v-decorator="[
                      'bankName',
                      {
                        rules: [
                          { required: true, message: '请选择开户行名称' },
                        ],
                      },
                    ]"
                    placeholder="请输入银行名称进行选择"
                  >
                    <a-select-option v-for="d in seloptions" :key="d.value"
                      >{{ d.label }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-item>

              <a-form-item
                v-bind="formItemLayout"
                label="开户行所在地"
                required
              >
                <a-cascader
                  :disabled="bankInfo"
                  class="w-sty"
                  v-model="bankaddress"
                  :options="options3"
                  @blur="addressBlur"
                  @change="addressChange"
                  placeholder="请选择开户行所在地"
                />
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="支行名称">
                <div>
                  <a-select
                    showSearch
                    @search="handleSearch"
                    :disabled="bankInfo"
                    labelInValue
                    @change="bankBranchNameChange"
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    style="width: 100%"
                    v-decorator="[
                      'bankBranchName',
                      {
                        rules: [{ required: true, message: '请输入支行名称' }],
                      },
                    ]"
                    placeholder="请选择支行名称"
                  >
                    <a-select-option
                      v-for="d in bankBranchoptions"
                      :key="d.value"
                      >{{ d.label }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="账号">
                <a-input
                  :disabled="bankInfo"
                  @blur="findCardBin"
                  v-decorator="[
                    'cardNo',
                    { rules: [{ required: true, message: '请输入账号' }] },
                  ]"
                  placeholder="请输入账号"
                />
              </a-form-item>
            </div>
          </a-tab-pane>

          <!-- 对私(非法人)forceRender -->
          <a-tab-pane tab="对私(非法人)" key="3">
            <div v-if="tabShow == '3'" key="tabShow3">
              <a-form-item v-bind="formItemLayout" label="账户名称">
                <a-input
                  v-decorator="[
                    'accountName',
                    { rules: [{ required: true, message: '请输入账户名称' }] },
                  ]"
                  placeholder="请输入账户名称"
                />
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="开户行名称">
                <div>
                  <a-select
                    :disabled="bankInfo"
                    showSearch
                    :notFoundContent="null"
                    :defaultActiveFirstOption="false"
                    :showArrow="false"
                    :filterOption="false"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @search="bankNameSearch"
                    @change="bankNameChange"
                    class="width-sty"
                    v-decorator="[
                      'bankName',
                      {
                        rules: [
                          { required: true, message: '请选择开户行名称' },
                        ],
                      },
                    ]"
                    placeholder="请输入银行名称进行选择"
                  >
                    <a-select-option v-for="d in seloptions" :key="d.value"
                      >{{ d.label }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-item>

              <a-form-item
                v-bind="formItemLayout"
                label="开户行所在地"
                required
              >
                <a-cascader
                  :disabled="bankInfo"
                  class="w-sty"
                  v-model="bankaddress"
                  :options="options3"
                  @blur="addressBlur"
                  @change="addressChange"
                  placeholder="请选择开户行所在地"
                />
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="支行名称">
                <div>
                  <a-select
                    showSearch
                    @search="handleSearch"
                    :disabled="bankInfo"
                    labelInValue
                    @change="bankBranchNameChange"
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    style="width: 100%"
                    v-decorator="[
                      'bankBranchName',
                      {
                        rules: [{ required: true, message: '请输入支行名称' }],
                      },
                    ]"
                    placeholder="请选择支行名称"
                  >
                    <a-select-option
                      v-for="d in bankBranchoptions"
                      :key="d.value"
                      >{{ d.label }}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="账号">
                <a-input
                  :disabled="bankInfo"
                  @blur="findCardBin"
                  v-decorator="[
                    'cardNo',
                    { rules: [{ required: true, message: '请输入账号' }] },
                  ]"
                  placeholder="请输入账号"
                />
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="预留银行手机号">
                <div>
                  <a-input
                    name="phone"
                    placeholder="请输入预留银行手机号"
                    v-decorator="[
                      'mobileNo',
                      {
                        rules: [
                          { required: true, message: '请输入预留银行手机号!' },
                          { validator: validateCode },
                        ],
                        validateTrigger: 'blur',
                      },
                    ]"
                  />
                </div>
              </a-form-item>

              <!-- 对私账户显示 -->
              <a-form-item v-bind="formItemLayout" label="持卡人身份证号">
                <a-input
                  v-decorator="[
                    'idCard',
                    {
                      rules: [
                        { required: true, message: '请输入持卡人证件号码' },
                        {
                          validator: validateIdentityNo2,
                        },
                      ],
                      validateTrigger: 'blur',
                    },
                  ]"
                  placeholder="请输入持卡人证件号码"
                />
              </a-form-item>
            </div>
          </a-tab-pane>
        </a-tabs>

        <a-modal
          :visible="submitVisible"
          :footer="null"
          @cancel="handleCancel"
          centered
        >
          <div style="text-align: center">
            <h1>判重提示</h1>
          </div>
          <div style="text-align: center">
            已存在相同社会统一信用代码/注册号的商户，继续提交可能会被审核拒绝，请确认是否继续？
          </div>
          <div style="text-align: center; margin-top: 20px">
            <a-button
              class="submitButton"
              :loading="submitLoading"
              @click="addDataSubmit"
              type="primary"
              >确认，下一步</a-button
            >
            <a-button
              class="submitButton"
              style="margin-left: 10px"
              @click="handleCancel"
              type="primary"
              >取消</a-button
            >
          </div>
        </a-modal>

        <a-col :xs="{ span: 24 }" :sm="{ span: 13, offset: 11 }">
          <a-form-item>
            <a-button
              class="submitButton"
              :loading="submitLoading"
              html-type="submit"
              type="primary"
              >下一步</a-button
            >
          </a-form-item>
        </a-col>
      </a-form>
    </div>
  </div>
</template>
<script>
//银行信息 修改 加按钮 点击按钮可修改  默认 不可修改状态
import {
  Radio,
  Input,
  InputNumber,
  DatePicker,
  Cascader,
  Modal,
} from "ant-design-vue";
import pick from "lodash.pick";
import api from "@/common/api";
import { get, post } from "@/common/api";
import moment from "moment";
import zh_CN from "ant-design-vue/lib/date-picker/locale/zh_CN";
import { type } from "os";
import typeData from "../../../../static/typeData.js";
const dateFormat = "YYYY-MM-DD";

export default {
  components: {
    RangePicker: DatePicker.RangePicker,
    Cascader,
    Modal,
  },

  data() {
    return {
      nation:'中国',
      zh_CN,
      cardType: "",
      adddata: null,
      updatedata: null,
      submitVisible: false,
      typeDisabled: false,
      submitLoading: false,
      loading: false,
      revise: false,
      modifyInput: false,
      remark: "",
      mer: false,
      issend: true,
      phone: false,
      phonevalue: "",
      Confirm: false, //验证码验证是否成功
      isLegalPerson: true, //是否是法人
      idCard: "",
      emailvalue: "",
      verCode: "",
      count: "",
      timer: "",
      bankdata: "",
      bankaddress: [],
      startDate: "",
      endDate: "",
      startValue: null,
      endValue: null,
      endOpen: false,
      dateFormat: "YYYY-MM-DD",
      memberNo: null,
      // value:'',
      modify: "",
      ischeck: false,
      isempty: true,
      array: [],
      text: [],
      text2: [],
      busitext: [],
      busOptions: [],
      issh: false,
      // areaOptions: '',
      // form: this.$form.createForm(this),
      expiryDate: "",
      expiryDate2: "",
      merchantName: "",
      shortName: "",
      merchantType: "",
      // industryCategoryCode: "",
      // industry: "",
      orgRegisterNo: "",
      orgRegisterPrincipal: "",
      orgExpiryDate: "",
      createDate: "",
      mainBusiness: "",
      realProvinceItem: "",
      realCityItem: "",
      realDistrictItem: "",
      realAddress: "",
      busiProvinceItem: "",
      busiCityItem: "",
      busiDistrictItem: "",
      placeRight: "",
      placeArea: "",
      orgEmployees: "",
      contactName: "",
      contactEmail: "",
      contactPhone: "",
      id: "",
      bankInfo: false,
      idCardShow: false,
      corpIdentify: {
        identityName: "",
        type: "legal",
        identityNo: "2222222222222",
        expiryDate: "永久",
        imgHead: null,
        imgEmblem: null,
        id: "",
      },
      actualControlIdentify: {
        identityName: "陈某某",
        type: "control",
        identityNo: "3333333333333",
        expiryDate: "2090-03-03",
        imgHead: null,
        imgEmblem: null,
        id: "",
      },
      cardHolderIdentity: {
        id: "",
        identityNo: "",
      },
      bankCard: {
        bankName: "",
        bankBranchName: "",
        bankNo: "",
        accountName: "",
        cardNo: "",
        province: "",
        city: "",
        id: "",
      },
      EPseloptions: [
        { text: "国家机关/事业单位/军队", value: "org_type_038" },
        { text: "国有企业/上市公司", value: "org_type_001" },
        { text: "股份有限公司/集体所有企业", value: "org_type_002" },
        { text: "中外合资企业", value: "org_type_003" },
        { text: "私营独资/合伙企业", value: "org_type_004" },
        { text: "个体工商户", value: "org_type_005" },
        { text: "外商独资企业", value: "org_type_006" },
        { text: "其他", value: "org_type_037" },
      ],
      areaoptions: [
        { text: "200平米以上", value: "place_area_001" },
        { text: "100-200平米(含)", value: "place_area_002" },
        { text: "50-100平米(含)", value: "place_area_003" },
        { text: "50平米以下(含)", value: "place_area_004" },
      ],
      numoptions: [
        { text: "500人以上", value: "org_employees_001" },
        { text: "100-500人(含)", value: "org_employees_002" },
        { text: "50-100人(含)", value: "org_employees_003" },
        { text: "10-50人(含)", value: "org_employees_004" },
        { text: "0-10人(含)", value: "org_employees_005" },
      ],

      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13, offset: 1 },
          md: { span: 10, offset: 1 },
        },
      },
      options: [
        // {
        //     label: "北京市",
        //     value: "1000",
        //     children: [
        //         {
        //             label: "北京市",
        //             value: "1000",
        //             children: [
        //                 {
        //                     label: "东城区",
        //                     value: "1021",
        //                 }
        //             ]
        //         }
        //     ]
        // }
      ],
      options2: [
        // {
        //     label: "北京市",
        //     value: "1000",
        //     children: [
        //         {
        //             label: "北京市",
        //             value: "1000",
        //             children: [
        //                 {
        //                     label: "东城区",
        //                     value: "1021",
        //                 }
        //             ]
        //         }
        //     ]
        // }
      ],
      mccName: "",
      mccoptions: [],
      options3: [],
      bankBranchList: [],
      bankBranchoptions: [],
      Areaoptions: [],
      Categoryoptions: [],
      seloptions: [],
      tabShow: "1",
      isPrivate: false,
      legalPersonAccount: Boolean,
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },

  created() {},

  mounted: function () {
    this.getmccData();
    // this.gettypeData();
    this.getareaData();
    this.memberNo = sessionStorage.getItem("orgAMemberNo");
    console.log("typeData", typeData);
    // this.Categoryoptions = typeData.list;
    let orgAMemberNo = sessionStorage.getItem("orgAMemberNo");
    if (orgAMemberNo) {
      this.getExistData(orgAMemberNo);
    }
  },

  watch: {
    startValue(val, dateval) {
      // console.log("startValue", val);
      // console.log(dateval);
    },
    endValue(val) {
      // console.log("endValue", val);
    },
  },

  methods: {
    moment,
    //日期不可选
    validatortextarea(rule, value, callback) {
      if (value.length == 100) {
        callback("主营业务不能超过100字!");
      }
      callback();
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },
    startChange(date, dateString) {
      console.log("startDate", dateString);
      this.startDate = dateString;
    },
    endChange(date, dateString) {
      console.log("endDate", dateString);
      this.endDate = dateString;
    },
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
      // console.log(open);
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    downaddress() {
      this.issh = true;
    },
    checkRepeatAcc() {
      let phone = this.form.getFieldValue("phone");
      let email = this.form.getFieldValue("email");
      if (!phone && !email) {
        Modal.warning({
          title: "请输入手机号和邮箱！",
          okText: "确定",
          onOk() {
            return false;
          },
        });
        return false;
      }
      let data = {};
      if (phone) {
        data.phone = phone;
      }
      if (email) {
        data.email = email;
      }
      this.$axios.post("/agent/member/checkRepeat", data).then((res) => {
        if (res.data.code == "OK") {
          let title = "";
          if (phone && !email) {
            title = "该手机号可以使用！";
          } else if (!phone && email) {
            title = "该邮箱可以使用！";
          } else {
            title = "该手机号和邮箱都可以使用！";
          }
          Modal.success({
            title: title,
            okText: "确定",
            onOk() {
              return false;
            },
          });
        } else if (res.data.code == "FAIL") {
          Modal.warning({
            title: res.data.message,
            okText: "确定",
            onOk() {
              return false;
            },
          });
        }
      });
    },
    //查询是否已有信息
    getExistData(memberNo) {
      this.$axios
        .get("/agent/merchant/network/fetch/step1/" + memberNo)
        .then((res) => {
          console.log("res", res);
          if (res.data.code == "OK") {
            if (res.data.data.merchantPosp.merchantName) {
              // 邮箱  手机号 不可修改
              this.modifyInput = true;

              this.remark = res.data.data.merchantPosp.remark
                ? res.data.data.merchantPosp.remark
                : "";
              //已有信息 修改
              this.modify = res.data.data;
              let merchantPosp = res.data.data.merchantPosp;
              let member = res.data.data.member;
              let identityLegal = res.data.data.identityLegal;
              let identityControl = res.data.data.identityControl;
              let bankCard = res.data.data.bankCard;
              let cardholder = res.data.data.cardholder;
              // let industryCategoryCode = merchantPosp.industry.value.split("|");
              this.mccName = merchantPosp.mccName;
              this.startValue = moment(merchantPosp.orgExpiryDateStart);
              this.endValue = moment(merchantPosp.orgExpiryDateEnd);
              this.bankaddress = [bankCard.province, bankCard.city];
              this.corpIdentify.id = identityLegal.id;
              this.actualControlIdentify.id = identityControl.id;
              this.cardHolderIdentity.id = cardholder ? cardholder.id : "";
              this.bankCard.id = bankCard.id;

              this.bankCard.bankBranchName = bankCard.bankBranchName;
              this.bankCard.bankNo = bankCard.bankNo;
              this.options3 = [
                {
                  value: bankCard.province,
                  label: bankCard.province,
                  children: [
                    {
                      value: bankCard.city,
                      label: bankCard.city,
                    },
                  ],
                },
              ];
              // 账户信息赋值
              if (!bankCard.isPrivate) {
                // 对公
                this.tabShow = "1";
                this.isPrivate = false;
                console.log("1111111111111111111111111111");
                this.getPubData();
              } else {
                if (merchantPosp.legalPersonAccount) {
                  // 判断是法人
                  this.tabShow = "2";
                  this.isPrivate = true;
                  this.legalPersonAccount = true;
                  this.$nextTick(() => {
                    this.form.setFieldsValue({
                      PrimobileNo: this.modify.bankCard.mobileNo,
                    });
                  });
                  this.getPriData();
                } else {
                  this.tabShow = "3";
                  this.isPrivate = true;
                  this.legalPersonAccount = false;
                  this.getPriNotLegalData();
                }
              }

              //赋值
              (this.isPrivate = bankCard.isPrivate),
                this.$nextTick(() => {
                  this.form.setFieldsValue({
                    email: member.email,
                    phone: member.mobileNo,
                    merchantName: merchantPosp.merchantName,
                    shortname: merchantPosp.shortName,
                    merchantType: merchantPosp.merchantType,
                    orgRegisterNo: merchantPosp.orgRegisterNo,
                    // industryCategoryCode: industryCategoryCode,
                    orgRegisterPrincipal: merchantPosp.orgRegisterPrincipal,
                    orgEmployees: merchantPosp.orgEmployees,
                    orgType: merchantPosp.orgType,
                    placeArea: merchantPosp.placeArea,
                    placeRight: merchantPosp.placeRight,
                    contactEmail: merchantPosp.contactEmail,
                    contactName: merchantPosp.contactName,
                    contactPhone: merchantPosp.contactPhone,
                    mainBusiness: merchantPosp.mainBusiness,
                    agentCode: merchantPosp.agentCode,
                    mccName: this.mccName.split("|"),
                    Address: [
                      merchantPosp.realProvince,
                      merchantPosp.realCity,
                      merchantPosp.realDistrict,
                    ],
                    dobusAddress: [
                      merchantPosp.busiProvince,
                      merchantPosp.busiCity,
                      merchantPosp.busiDistrict,
                    ],
                    realAddress: merchantPosp.realAddress,
                    busiAddress: merchantPosp.busiAddress,
                    identityName: identityLegal.identityName,
                    identityName2: identityControl.identityName,
                    identityNo: identityLegal.identityNo,
                    identityNo2: identityControl.identityNo,
                    expiryDate: moment(identityLegal.expiryDate),
                    expiryDate2: moment(identityControl.expiryDate),
                    codetype: identityLegal.type,
                    codetype2: identityLegal.type || identityControl.type,
                    // isPrivate: bankCard.isPrivate + '',
                    bankName: bankCard.bankName,
                    bankBranchName: {
                      key: bankCard.bankNo,
                      label: bankCard.bankBranchName,
                    },
                    // accountName: bankCard.accountName,
                    cardNo: bankCard.cardNo,
                    // mobileNo: bankCard.mobileNo,
                    createDate: moment(merchantPosp.createDate),
                    // legalPersonAccount: merchantPosp.legalPersonAccount + ''
                  });
                  this.handleBlur();
                  this.text2 = this.bankaddress;
                  this.addressBlur();
                });
            } else {
              this.getPubData();
            }
          }
        });
    },
    handleCancel() {
      this.submitVisible = false;
    },
    checkRepeated() {
      let orgRegisterNo = this.form.getFieldValue("orgRegisterNo");
      if (orgRegisterNo == null || orgRegisterNo == "") {
        this.$message.error("请输入社会统一信用代码/注册号");
        return false;
      }
      this.$axios
        .get(
          "/agent/merchant/network/checkRepeated/" +
            orgRegisterNo +
            "/" +
            this.memberNo
        )
        .then((res) => {
          if (res.data.code == "OK") {
            this.addDataSubmit();
          } else {
            this.submitVisible = true;
          }
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      // 企业客户提交
      this.form.validateFields((err, values) => {
        if (!err) {
          this.merchantType = values.merchantType;
          this.merchantName = values.merchantName;
          this.shortname = values.shortname;
          this.orgRegisterNo = values.orgRegisterNo;
          // this.industryCategoryCode = values.industryCategoryCode;
          this.orgRegisterPrincipal = values.orgRegisterPrincipal;
          this.mainBusiness = values.mainBusiness;
          this.placeRight = values.placeRight;
          this.placeArea = values.placeArea;
          this.orgEmployees = values.orgEmployees;
          this.contactName = values.contactName;
          this.contactEmail = values.contactEmail;
          this.contactPhone = values.contactPhone;
          this.realAddress = values.realAddress;
          this.corpIdentify.identityName = values.identityName;
          this.corpIdentify.type = values.codetype;
          this.corpIdentify.identityNo = values.identityNo;
          this.corpIdentify.expiryDate = values.expiryDate;
          this.actualControlIdentify.identityName = values.identityName2;
          this.actualControlIdentify.type = values.codetype2;
          this.actualControlIdentify.identityNo = values.identityNo2;
          this.actualControlIdentify.expiryDate = values.expiryDate2;
          this.bankCard.bankName = values.bankName;
          // this.bankCard.bankBranchName = values.bankBranchName;
          this.bankCard.accountName = values.accountName
            ? values.accountName
            : this.bankCard.accountName;
          this.bankCard.cardNo = values.cardNo;

          this.captcha = values.captcha;
          // 保存客户名称 法人/负责人
          sessionStorage.setItem("name", values.merchantName);
          sessionStorage.setItem("identityName", values.identityName);
          sessionStorage.setItem("identityType", values.codetype);
          sessionStorage.setItem("identityNo", values.identityNo);
          sessionStorage.setItem("expiryDate", this.expiryDate|| this.modify.identityLegal.expiryDate);
          if (!this.startValue || !this.endValue) {
            this.$message.warning("请选择营业期限");
            return false;
          }
          this.orgExpiryDate = this.startDate + "," + this.endDate;
          if (!this.orgExpiryDate || this.orgExpiryDate == ",") {
            this.orgExpiryDate = "";
          }
          //  单位客户资料登记
          let logMerchantPospUpdateRequestPost = {
            id: this.modify ? this.modify.merchantPosp.id : "",
            memberNo: this.memberNo,
            merchantName: values.merchantName,
            orgType: values.orgType,
            shortName: values.shortname,
            merchantType: values.merchantType,
            createDate: this.createDate || this.modify.merchantPosp.createDate,
            // industry: this.industry || this.modify.merchantPosp.industry,
            orgRegisterNo: this.orgRegisterNo,
            orgRegisterPrincipal: this.orgRegisterPrincipal,
            orgExpiryDateEnd:
              this.endDate || this.modify.merchantPosp.orgExpiryDateEnd,
            orgExpiryDateStart:
              this.startDate || this.modify.merchantPosp.orgExpiryDateStart,
            mainBusiness: this.mainBusiness,
            //实际地址
            realProvince:
              this.realProvinceItem.value ||
              this.modify.merchantPosp.realProvince,
            realCity:
              this.realCityItem.value || this.modify.merchantPosp.realCity,
            realDistrict:
              this.realDistrictItem.value ||
              this.modify.merchantPosp.realDistrict,
            realProvinceName:
              this.realProvinceItem.label ||
              this.modify.merchantPosp.realProvinceName,
            realCityName:
              this.realCityItem.label || this.modify.merchantPosp.realCityName,
            realDistrictName:
              this.realDistrictItem.label ||
              this.modify.merchantPosp.realDistrictName,
            realAddress: this.realAddress,
            //营业地址
            busiProvince:
              this.busiProvinceItem.value ||
              this.modify.merchantPosp.busiProvince,
            busiCity:
              this.busiCityItem.value || this.modify.merchantPosp.busiCity,
            busiDistrict:
              this.busiDistrictItem.value ||
              this.modify.merchantPosp.busiDistrict,
            busiProvinceName:
              this.busiProvinceItem.label ||
              this.modify.merchantPosp.busiProvinceName,
            busiCityName:
              this.busiCityItem.label || this.modify.merchantPosp.busiCityName,
            busiDistrictName:
              this.busiDistrictItem.label ||
              this.modify.merchantPosp.busiDistrictName,
            busiAddress: values.busiAddress,
            placeRight: this.placeRight,
            placeArea: this.placeArea,
            orgEmployees: this.orgEmployees,
            contactName: this.contactName,
            contactEmail: this.contactEmail,
            contactPhone: this.contactPhone,
            agentCode: values.agentCode,
            legalPersonAccount: this.legalPersonAccount,
            mccName: this.mccName,
          };
          sessionStorage.setItem("realProvince", this.realProvinceItem.value || this.modify.merchantPosp.realProvince);
          sessionStorage.setItem("realCity", this.realCityItem.value || this.modify.merchantPosp.realCity);
          sessionStorage.setItem("realDistrict", this.realDistrictItem.value || this.modify.merchantPosp.realDistrict);
          sessionStorage.setItem("realProvinceName", this.realProvinceItem.label || this.modify.merchantPosp.realProvinceName);
          sessionStorage.setItem("realCityName", this.realCityItem.label || this.modify.merchantPosp.realCityName);
          sessionStorage.setItem("realDistrictName", this.realDistrictItem.label || this.modify.merchantPosp.realDistrictName);
          sessionStorage.setItem("realAddress", this.realAddress);
          let legalLogIdentityPost = {
            identityName: this.corpIdentify.identityName,
            identityNo: this.corpIdentify.identityNo,
            expiryDate: this.expiryDate || this.modify.identityLegal.expiryDate,
            id: this.corpIdentify.id || "",
            nation : this.nation
          };

          let controlLogIdentityPost = {
            identityName: this.actualControlIdentify.identityName,
            identityNo: this.actualControlIdentify.identityNo,
            expiryDate:
              this.expiryDate2 || this.modify.identityControl.expiryDate,
            id: this.actualControlIdentify.id || "",
            nation:this.nation
          };

          let cardHolderIdentityPost =
            this.isPrivate && !this.legalPersonAccount
              ? {
                  id: this.cardHolderIdentity.id || "",
                  identityNo: values.idCard,
                }
              : null;

          let logBankCardPost = {
            isPrivate: this.isPrivate,
            bankName: this.bankCard.bankName,
            bankBranchName: this.bankCard.bankBranchName,
            bankNo: this.bankCard.bankNo,
            accountName: this.bankCard.accountName,
            cardNo: this.bankCard.cardNo,
            province: this.bankaddress[0] || this.modify.bankCard.province,
            city: this.bankaddress[1] || this.modify.bankCard.city,
            id: this.bankCard.id || "",
            mobileNo:
              values.mobileNo || values.contactBusMobile || values.PrimobileNo,
          };
          let memberAddRequest = {
            email: values.email,
            mobileNo: values.phone,
          };
          //首次提交
          const adddata = {
            logMerchantPospAddRequest: logMerchantPospUpdateRequestPost,
            legalLogIdentity: legalLogIdentityPost,
            controlLogIdentity: controlLogIdentityPost,
            cardHolderIdentity: cardHolderIdentityPost,
            logBankCard: logBankCardPost,
            memberAddRequest: memberAddRequest,
          };
          //更新
          const updatedata = {
            logMerchantPospUpdateRequest: logMerchantPospUpdateRequestPost,
            legalLogIdentity: legalLogIdentityPost,
            controlLogIdentity: controlLogIdentityPost,
            cardHolderIdentity: cardHolderIdentityPost,
            logBankCard: logBankCardPost,
          };
          this.adddata = adddata;
          this.updatedata = updatedata;

          this.checkRepeated();
        }
      });
    },
    addDataSubmit() {
      this.submitLoading = true;
      if (this.modify) {
        this.updateData(this.updatedata);
      } else {
        api.setOrgData(
          this.adddata,
          (res) => {
            console.log("res", res);
            if (res.code == "OK") {
              sessionStorage.setItem("orgAMemberNo", res.data.memberNo);
              sessionStorage.setItem("orgAMerchantName", res.data.username);
              this.doNext("A");
            } else {
              this.submitLoading = false;
              this.$message.error("出错了：" + res.message);
            }
          },
          (err) => {
            this.submitLoading = false;
          }
        );
      }
    },
    // 客户信息修改提交
    updateData(data) {
      console.log("data", data);
      api.updateData(
        data,
        (res) => {
          console.log("res", res);
          if (res.code == "OK") {
            this.submitLoading = false;
            // this.$router.push("/OrgRegister/step5");
            this.$router.replace("/OrgRegister/dataUploadA/step2");
          } else {
            this.submitLoading = false;
            this.$message.error(res.message);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    validateIdentityNo(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
      }
      callback();
    },
    validateIdentityNo2(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
      }
      callback();
    },
    validateOrgRegisterNo(rule, value, callback) {
      const form = this.form;
      if (value) {
        let len = value.length;
        if (value && len != 18 && len != 15) {
          callback("您输入的社会统一信用代码有误！");
        } else {
          this.payPassword = value;
        }
      }
      callback();
    },
    validateorgRegisterPrincipal(rule, value, callback) {
      const form = this.form;
      if (value && !/^(0|[1-9][0-9]*)(\.\d+)?$/.test(value)) {
        callback("您输入注册资本格式有误！");
      } else if (value.length > 9) {
        callback("您输入注册资本超出限额！");
      } else {
        callback();
      }
      callback();
    },
    validateCode(rule, value, callback) {
      if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        this.phone = false;
        callback("您输入的手机号格式有误！");
        return;
      } else {
        if (!value) {
          this.phone = false;
        } else {
          this.phone = true;
          this.phonevalue = value;
        }
        callback();
      }
    },
    validateverCode(rule, value, callback) {
      const reg = new RegExp("^[0-9]{4,10}$");
      if (value && !reg.test(value)) {
        callback("您输入的验证码格式有误！");
      } else {
        this.verCode = value;
      }
      callback();
    },
    // 验证码验证
    verCodecom() {
      let phone = this.form.getFieldValue("mobileNo");
      this.$axios
        .get(
          "/agent/customer/org/bank/mobile/check/" + phone + "/" + this.verCode
        )
        .then((res) => {
          if (res.data.code == "OK") {
            this.$message.success(res.data.message);
          } else {
            this.$message.error(res.data.message);
            return false;
          }
        });
    },
    validatemail(rule, value, callback) {
      const reg = new RegExp(
        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      );
      if (value && !reg.test(value)) {
        callback("您输入的邮箱格式有误！");
        return;
      } else {
        this.emailvalue = value;
        console.log(this.emailvalue);
        callback();
      }
    },
    tabcallback(key) {
      console.log(key);
      this.tabShow = key;
      this.bankaddress = [];
      this.options3 = [];
      if (key == "1") {
        this.isPrivate = false;
        this.getPubData();
      } else {
        this.isPrivate = true;
        if (key == "2") {
          this.legalPersonAccount = true;
          this.getPriData();
        } else {
          this.legalPersonAccount = false;
          // this.getPriNotLegalData()
        }
      }
    },
    //对公赋值
    getPubData() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("phone"));
        const mobile = this.form.getFieldValue("phone")
          ? this.form.getFieldValue("phone")
          : "";
        console.log("mobile", mobile);
        this.$nextTick(() => {
          this.form.setFieldsValue({
            contactBusMobile: mobile,
          });
        });
      }, 500);
      setTimeout(() => {
        this.bankCard.accountName = this.form.getFieldValue("merchantName")
          ? this.form.getFieldValue("merchantName")
          : this.modify.merchantPosp.merchantName;
      }, 1);
    },
    //对私赋值
    getPriData() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("identityNo"));
        this.bankCard.accountName = this.form.getFieldValue("identityName");
        this.idCard = this.form.getFieldValue("identityNo");
      }, 1);
    },
    getPriNotLegalData() {
      if (
        this.modify.cardholder.identityNo &&
        this.modify.bankCard.accountName &&
        this.modify.bankCard.mobileNo
      ) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            idCard: this.modify.cardholder.identityNo,
            accountName: this.modify.bankCard.accountName,
            mobileNo: this.modify.bankCard.mobileNo,
          });
        });
      }
    },
    mccHandleChange(value, selectedOptions) {
      console.log("typeChange", typeof value, value);
      console.log(selectedOptions);
      let arr = value;
      let labelarr = selectedOptions;
      this.array = [];
      if (labelarr) {
        if (labelarr.length > 0) {
          for (var i = 0; i < labelarr.length; i++) {
            this.array.push(labelarr[i].label);
          }
        }
      }
      // console.log(this.array);
      // console.log(typeof arr.join("|"), arr.join("|"));a
      this.mccName = arr.join("|");
      // this.mcc = {
      //   value: this.array.join("|"),
      //   label: arr.join("|")
      // };
      console.log(this.mccName);
    },
    handleChange(value, selectedOptions) {
      console.log("typeChange", typeof value, value);
      console.log(selectedOptions);
      let arr = value;
      let labelarr = selectedOptions;
      this.array = [];
      if (labelarr) {
        if (labelarr.length > 0) {
          for (var i = 0; i < labelarr.length; i++) {
            this.array.push(labelarr[i].label);
          }
        }
      }
      this.industry = {
        value: arr.join("|"),
        label: this.array.join("|"),
      };
      console.log(this.industry);
    },
    handleChange1(value) {
      if (value == "mer") {
        this.mer = true;
      } else {
        this.mer = false;
      }
    },
    tolong() {
      this.endValue = moment("9999-01-01");
      this.endDate = "9999-01-01";
    },
    onPrev(step) {
      var st = step - 1;
      this.$router.push("/OrgRegister/step" + st);
    },
    doNext(step) {
      // var st = step + 1;
      // this.$router.push("/OrgRegister/step" + st);
      this.$router.push(`/OrgRegister/dataUpload${step}/step2`);
    },
    getareaData() {
      this.$axios.get("/agent/division/all").then((res) => {
        const result = res.data;
        if (res.data.list) {
          let list = result.list;
          let arr = [];
          let newArr = list.map((item, index, list) => {
            let test = {
              label: item.label,
              value: item.value,
              children: [],
            };
            arr.push(test);
            if (item.children) {
              let children = [];
              for (let i = 0; i < item.children.length; i++) {
                let test2 = {
                  label: item.children[i].label,
                  value: item.children[i].value,
                  children: [],
                };
                children.push(test2);

                if (item.children[i].children) {
                  let child2 = [];
                  for (let a = 0; a < item.children[i].children.length; a++) {
                    let test3 = {
                      label: item.children[i].children[a].label,
                      value: item.children[i].children[a].value,
                    };
                    child2.push(test3);
                  }
                  children[i].children = child2;
                }
              }
              arr[index]["children"] = children;
            }
            return arr;
          });
          // console.log("newArr", newArr);
          this.options = newArr[0];
          this.onlySH(this.options);
      
        } else {
        }
      });
    },

    phoneChange(e) {
      console.log(e.target.value);
      this.$nextTick(() => {
        this.form.setFieldsValue({
          contactBusMobile: e.target.value,
          contactPhone: e.target.value,
        });
      });
    },
    emailChange(e) {
      console.log(e.target.value);
      this.$nextTick(() => {
        this.form.setFieldsValue({
          contactEmail: e.target.value,
        });
      });
    },
    placeRightChange(e) {
      console.log("radio checked", e.target.value);
      // if (e.target.value == "b") {
      //   this.docking = false;
      // } else {
      //   this.docking = true;
      // }
    },
    onChange(value, selectedOptions) {
      console.log("changevalue", typeof value, value);
      console.log("selectedOptions", selectedOptions);
      this.text = value;
      // this.text = selectedOptions.map(o => o.label);
      // if (selectedOptions.length == 1) {

      // }
      // if (selectedOptions.length == 2) {

      // }
      if (selectedOptions.length == 3) {
        this.realProvinceItem = {
          label: selectedOptions[0].label,
          value: selectedOptions[0].value,
        };
        this.realCityItem = {
          label: selectedOptions[1].label,
          value: selectedOptions[1].value,
        };
        this.realDistrictItem = {
          label: selectedOptions[2].label,
          value: selectedOptions[2].value,
        };
      }
      console.log("this.text", this.text);
      console.log(this.realProvinceItem);
      console.log(this.realDistrictItem);
      console.log(this.realCityItem);
    },
    onbusiChange(value, selectedOptions) {
      console.log("changevalue", typeof value, value);
      this.busitext = value;
      this.busOptions = selectedOptions;
      // this.busitext = selectedOptions.map(o => o.label);
      console.log("selectedOptions", selectedOptions);
      // if (selectedOptions.length == 1) {

      // } else if (selectedOptions.length == 2) {

      // } else
      if (selectedOptions.length == 3) {
        this.busiCityItem = {
          label: selectedOptions[1].label,
          value: selectedOptions[1].value,
        };
        this.busiProvinceItem = {
          label: selectedOptions[0].label,
          value: selectedOptions[0].value,
        };
        this.busiDistrictItem = {
          label: selectedOptions[2].label,
          value: selectedOptions[2].value,
        };
      } else {
        console.log(selectedOptions);
      }
      console.log("this.busitext", this.busitext);
      // this.busiProvince = this.busitext[0];
      // this.busiCityItem = this.busitext[1];
      // this.busiDistrictItem = this.busitext[2];
    },
    addressChange(value, selectedOptions) {
      console.log("addressChange", value);
      this.text2 = value;
      this.bankaddress = value;
      // this.text2 = selectedOptions.map(o => o.label);
      console.log("this.text2", this.text2);
      // if (selectedOptions.length == 1) {
      //   this.bankCard.province = {
      //     label: selectedOptions[0].label,
      //     value: selectedOptions[0].value
      //   };
      // } else if (selectedOptions.length == 2) {
      //   this.bankCard.city = {
      //     label: selectedOptions[1].label,
      //     value: selectedOptions[1].value
      //   };
      // } else if (selectedOptions.length == 3) {
      //   this.bankCard.district = {
      //     label: selectedOptions[2].label,
      //     value: selectedOptions[2].value
      //   };
      // }else {
      //   console.log(selectedOptions);
      // }

      this.bankCard.province = this.text2[0];
      this.bankCard.city = this.text2[1];
      // this.bankCard.district = this.text2[2];
    },
    merchantNameChange(e) {
      if (this.tabShow == "1") {
        this.bankCard.accountName = e.target.value;
      }
    },
    AccountTypeChange(e) {
      console.log("value", e.target.value);
      if (e.target.value == "true") {
        this.idCardShow = true;
        let identityNo = this.form.getFieldValue("identityNo");
        let identityName = this.form.getFieldValue("identityName");
        if (identityNo) {
          this.$nextTick(() => {
            this.form.setFieldsValue({
              idCard: identityNo,
            });
          });
        } else {
          this.$message.warning("请输入法人身份证号！");
        }
        if (identityName) {
          this.$nextTick(() => {
            this.form.setFieldsValue({
              accountName: identityName,
            });
          });
        } else {
          this.$message.warning("请输入法人姓名！");
        }
      } else {
        this.idCardShow = false;
        let merchantName = this.form.getFieldValue("merchantName");
        if (merchantName) {
          this.form.setFieldsValue({
            accountName: merchantName,
          });
        } else {
          this.$message.warning("请填写客户名称！");
        }
      }
    },
    AccountAscriptionChange(e) {
      console.log("value", e.target.value);
      if (e.target.value == "true") {
        this.isLegalPerson = true;
        let identityNo = this.form.getFieldValue("identityNo");
        let identityName = this.form.getFieldValue("identityName");
        if (identityNo) {
          this.form.setFieldsValue({
            idCard: identityNo,
          });
        } else {
          this.$message.warning("请输入法人身份证号！");
        }
        if (identityName) {
          this.form.setFieldsValue({
            accountName: identityName,
          });
        } else {
          this.$message.warning("请输入法人姓名！");
        }
      } else {
        this.isLegalPerson = false;
      }
    },
    identityNameChange(e) {
      if (this.tabShow == "2") {
        this.bankCard.accountName = e.target.value;
      }
      let merchantType = this.form.getFieldValue("merchantType");
      if (merchantType == "mer") {
        this.form.setFieldsValue({
          accountName: e.target.value,
        });
        this.isempty = false;
      }
    },
    agentCodeNameChange(e) {
      // let merchantType = this.form.getFieldValue("merchantType");
      // if (merchantType == "mer") {
      // this.form.setFieldsValue({
      //     accountName: e.target.value
      // });
      // this.isempty = false;
      // }
    },
    tosame() {
      let name = this.form.getFieldValue("identityName");
      let identityNo = this.form.getFieldValue("identityNo");
      let expiryDate = this.form.getFieldValue("expiryDate");
      this.form.setFieldsValue({
        identityName2: name,
        identityNo2: identityNo,
        expiryDate2: expiryDate,
      });
      this.expiryDate2 = expiryDate.format("YYYY-MM-DD");
    },
    toAddSame() {
      let dobusAddress = this.form.getFieldValue("dobusAddress");
      console.log("dobusAddress", dobusAddress);
      let busiAddress = this.form.getFieldValue("busiAddress");
      console.log("busiAddress", busiAddress);
      if (dobusAddress && busiAddress) {
        console.log("this.busOptions", this.busOptions);
        if (dobusAddress[0] == "2900") {
          //判断为上海市再赋值
          if (this.busOptions.length == 1) {
            this.realProvinceItem = {
              label: this.busOptions[0].label,
              value: this.busOptions[0].value,
            };
            console.log("this.realProvinceItem", this.realProvinceItem);
          } else if (this.busOptions.length == 2) {
            this.realCityItem = {
              label: this.busOptions[1].label,
              value: this.busOptions[1].value,
            };
            console.log("this.realCityItem", this.realCityItem);
          } else if (this.busOptions.length == 3) {
            this.realProvinceItem = {
              label: this.busOptions[0].label,
              value: this.busOptions[0].value,
            };
            this.realCityItem = {
              label: this.busOptions[1].label,
              value: this.busOptions[1].value,
            };
            this.realDistrictItem = {
              label: this.busOptions[2].label,
              value: this.busOptions[2].value,
            };
            console.log("this.realDistrictItem", this.realDistrictItem);
          } else {
            console.log(this.busOptions);
          }
          this.$nextTick(() => {
            this.form.setFieldsValue({
              Address: [dobusAddress[0], dobusAddress[1], dobusAddress[2]],
              realAddress: busiAddress,
            });
          });
        } else {
          this.$message.warning("实际经营地址只能为上海市！");
        }
      } else {
        this.$message.warning("请填写营业执照地址！");
      }
    },
    onChange2(e) {
      console.log("changevalue2", e.target.checked);
      if (e.target.checked == true) {
        this.ischeck = true;
      } else {
        this.ischeck = false;
      }
    },
    dateChange(date, dateString) {
      console.log("dateString", dateString);
      this.expiryDate = dateString;
    },
    dateChange2(date, dateString) {
      console.log("dateString2", dateString);
      this.expiryDate2 = dateString;
    },
    longexpiryDate() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          expiryDate: moment("9999-01-01"),
        });
      });
      this.expiryDate = "9999-01-01";
    },
    longexpiryDate2() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          expiryDate2: moment("9999-01-01"),
        });
      });
      this.expiryDate2 = "9999-01-01";
    },
    createDateChange(date, dateString) {
      console.log("createDate", dateString);
      this.createDate = dateString;
    },
    // 开户名称搜索
    bankNameSearch(value) {
      // console.log(value);
      let data = {
        bankSuper: value,
      };
      api.getBankName(data, (res) => {
        if (res.code == "OK") {
          this.seloptions = [];
          console.log("res.data", typeof res.list, res.list);
          res.list.forEach((r) => {
            this.seloptions.push({
              value: r.value,
              label: r.label,
            });
          });
          console.log(this.seloptions);
        } else {
          console.log("res", res);
        }
      });
      console.log(this.seloptions);
    },
    bankNameChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        bankName: value,
      });
      let data = {
        bankSuper: value,
      };
      api.getBankName(data, (res) => {
        console.log("res", res);
        if (res.code == "OK") {
          this.seloptions = [];
          console.log("res.data", typeof res.list, res.list);
          res.list.forEach((r) => {
            this.seloptions.push({
              value: r.value,
              label: r.label,
            });
          });
          console.log(this.seloptions);
        } else {
          console.log("res", res);
        }
      });
    },
    bankBranchNameChange(value) {
      console.log("value", value);
      this.bankCard.bankNo = value.key;
      this.bankCard.bankBranchName = value.label;
    },
    handleFocus() {
      console.log("focus");
    },
    handleBlur() {
      let selvalue = this.form.getFieldValue("bankName");
      if (selvalue) {
        console.log("开户行:", selvalue);
        let data = {
          bankCode: selvalue,
        };
        api.getBankArea(
          data,
          (res) => {
            console.log("res", res);
            if (res.code == "OK") {
              this.options3 = res.list;
            } else {
              console.log(res);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        // console.log("开户行为空", selvalue);
      }
    },
    // 开户地址失去焦点
    addressBlur() {
      let selvalue = this.form.getFieldValue("bankName");
      console.log("开户行地址：", this.text2);
      if (this.text2) {
        let data = {
          bankCode: selvalue,
          province: this.text2[0],
          city: this.text2[1],
          bankName: "",
        };
        api.getBankBranch(
          data,
          (res) => {
            console.log("res", res);
            if (res.code == "OK") {
              this.bankBranchoptions = res.list;
              this.bankBranchList = res.list;
            } else {
              console.log(res);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        console.log("开户行地址为空");
      }
    },
    // 支行地址搜索
    handleSearch(value) {
      // console.log(value)
      if (escape(value).indexOf("%u") < 0) {
        let keywords = value;
        var newList = [];
        this.bankBranchoptions.forEach((item) => {
          if (item.label.indexOf(keywords) != -1) {
            newList.push(item);
          }
        });
        this.bankBranchoptions = newList;
      } else {
        this.bankBranchoptions = this.bankBranchList;
      }
    },
    //卡号
    findCardBin() {
      if (!this.mer) {
        return;
      }
      let selvalue = this.form.getFieldValue("cardNo");
      console.log(selvalue);
      let isnum = /^\d+$/.test(selvalue);
      if (!isnum) {
        console.log("cg");
        return false;
      }

      this.$axios.get("/agent/card/bin/search/" + selvalue).then(
        (res) => {
          console.log("res", res);
          if (res.data.code == "OK") {
            this.cardType = res.data.data.cardtype;
          } else if (res.data.code == "NEED_LOGIN") {
          } else {
            // this.$message.warning("卡号有误！");
          }
        },
        (err) => {
          console.log(res);
        }
      );
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    // 获取验证码
    getCode() {
      if (this.phone) {
        this.getBankcode();
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.issend = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.issend = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      } else {
        this.$message.warning("请输入银行预留手机号");
      }
    },
    getBankcode() {
      let mobileNo = this.form.getFieldValue("mobileNo");
      this.loading = true;
      this.$axios.get("/agent/customer/org/bank/mobile/vcode/" + mobileNo).then(
        (res) => {
          console.log("res", res);
          if (res.data.code == "OK") {
            this.loading = false;
          } else {
            this.$message.warning(res.data.message);
            this.loading = false;
          }
        },
        (err) => {
          console.log(res);
        }
      );
    },
    bankInfoModify() {
      this.bankInfo = false;
    },
    gettypeData() {
      this.$axios.get("/agent/industry/list").then((res) => {
        const result = res.data;
        if (res.data.list) {
          let list = result.list;
          let arr = [];
          let newArr = list.map((item, index, list) => {
            let test = {
              label: item.label,
              value: item.value,
              children: [],
            };
            arr.push(test);
            if (item.children) {
              let children = [];

              for (let i = 0; i < item.children.length; i++) {
                let test2 = {
                  label: item.children[i].label,
                  value: item.children[i].value,
                  children: [],
                };
                children.push(test2);

                if (item.children[i].children) {
                  let child2 = [];
                  for (let a = 0; a < item.children[i].children.length; a++) {
                    let test3 = {
                      label: item.children[i].children[a].label,
                      value: item.children[i].children[a].value,
                      children: [],
                    };
                    child2.push(test3);

                    if (item.children[i].children[a].children) {
                      let child3 = [];
                      for (
                        let b = 0;
                        b < item.children[i].children[a].children.length;
                        b++
                      ) {
                        let test4 = {
                          label: item.children[i].children[a].children[b].label,
                          value: item.children[i].children[a].children[b].value,
                        };
                        child3.push(test4);
                      }
                      child2[a].children = child3;
                    }
                  }
                  children[i].children = child2;
                }
              }
              arr[index]["children"] = children;
            }

            return arr;
          });
          this.Categoryoptions = newArr[0];
        } else {
          // console.log("res", res);
        }
      });
    },
    // 商户类别获取
    getmccData() {
      this.$axios.get("/agent/mcc/list").then((res) => {
        console.log("res", res);
        // const result = res.data;
        if (res.data.list) {
          let list = res.data.list;
          let arr = [];
          let newArr = list.map((item, index, list) => {
            let test = {
              label: item.categoryName,
              value: item.categoryName,
              children: [],
            };
            arr.push(test);
            if (item.items) {
              let children = [];

              for (let i = 0; i < item.items.length; i++) {
                let test2 = {
                  label: item.items[i].name,
                  value: item.items[i].mcc,
                  // children: []
                };
                children.push(test2);
              }
              // console.log("children", children);
              arr[index]["children"] = children;
            }
            return arr;
          });
          console.log("newArr", newArr);
          this.mccoptions = newArr[0];
          console.log("this.mccoptions", this.mccoptions);
        } else {
          console.log("res", res);
        }
      });
    },
    // 实际经营地址只能是上海市判断
    onlySH(list) {
      let arr = [];
      let firstData;

      // 第一种
      // list.map((item, index) => {
      //   if (item.value == '2900') {
      //     arr.push(item);
      //   }
      // })
      // this.options2 = arr;
      // console.log("this.options2", this.options2);

      // 第二种
      list.map((item, index) => {
        if (item.value !== "2900") {
          let data = {
            children: item.children,
            value: item.value,
            label: item.label,
            disabled: true,
          };
          arr.push(data);
        } else {
          firstData = item;
        }
      });
      arr.unshift(firstData);
      this.options2 = arr;
      console.log("this.options2", this.options2);
    },
  },
};
// }
</script>


<style lang="less" scoped>
.ant-input {
  width: 50%;
}

.btn-sty {
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #333;
}

.formGroupTitle {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  margin-bottom: 20px;
}

.text-div {
  text-align: center;
}

.text-div button {
  margin: 0 10px;
}

.width-sty {
  width: 50%;
}

.w-sty {
  width: 80%;
}

.result {
  color: red;
  text-align: right;
}

.submitButton {
  width: 10vw;
}

/deep/.ant-tabs-nav-scroll {
  text-align: center;
}

.ant-tabs-nav .ant-tabs-tab-active {
  color: #b3292c;
  font-weight: 500;
  border-top: 1px solid #b3292c;
  border-left: 1px solid #b3292c;
  border-radius: 5px 5px;
  border-right: 1px solid #b3292c;
}
//       /deep/.ant-message{
//     font-size:18px;
//   }
</style>